<template>
  <button :class="[classes]" @click="handleClick">
    <span class="em-btn-text">
      <slot>{{ text }}</slot>
    </span>
  </button>
</template>

<script>
const prefix = "em-btn"; //定义组件前缀
export default {
  name: "em-button",
  props: {
    text: String,
    disabled: Boolean,
    round: Boolean,
    size: {
      //大小
      type: String,
      default: "normal",
      validator(value) {
        return ["small", "normal", "large"].includes(value);
      },
    },
    type: {
      // 类型，可选值为 default primary danger
      type: String,
      default: "default",
      validator(value) {
        return ["default", "primary", "danger"].includes(value);
      },
    },
  },
  computed: {
    classes() {
      return [
        `${prefix}`,
        `${prefix}-${this.type}`,
        `${prefix}-${this.size}`,
        {
          [`${prefix}-disabled`]: this.disabled,
          [`${prefix}-round`]: this.round,
        },
      ];
    },
  },
  methods: {
    handleClick(event) {
      this.$emit("click", event);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./main.scss";
</style>
